<template>
  <div class="comment-item">
    <div class="comment-author"><strong>{{ comment.author }}</strong></div>
    <div class="comment-content">{{ comment.content }}</div>
  </div>
</template>

<script setup>
import { defineProps } from 'vue';

defineProps({
  comment: {
    type: Object,
    required: true,
  },
});
</script>

<style scoped>
.comment-item {
  background-color: #f8f8f8;
  border: 1px solid #eee;
  border-radius: 6px;
  padding: 12px;
  margin-bottom: 10px;
  font-size: 0.9em;
}

.comment-author {
  font-weight: bold;
  color: #444;
  margin-bottom: 5px;
}

.comment-content {
  color: #666;
  line-height: 1.5;
  white-space: pre-wrap;
}
</style>